import React from 'react'
import { flushSync } from 'react-dom';

interface IProps {
  startValue?: number;
  onChange: (value: number, stateValue: number) => void;
}

const Count = (props: IProps) => {
  console.log('渲染了');
  const [num, setNum]  = React.useState(0)

  React.useEffect(() => {
    if (props.startValue) {
      setNum(props.startValue)
      console.log('useEffect');
      
    }
  }, [])

   const onChange = (value: number) => {
    props.onChange && props.onChange(value, num)
  }

  const onAdd = () => {
    console.log('onAdd');
    
    setNum(prev => {
      onChange(prev + 1)
      return prev + 1
    })
  }

  const onDecrease = () => {
    return () => {
      setNum(prev => {
        onChange(prev - 1)
        return prev - 1
      })
    }
  }

 

  return (
    <div>
      <div onClick={onDecrease()}>-</div>
      <div>{ num }</div>
      <div onClick={onAdd}>+</div>
    </div>
  )
}

export default Count
